<template>
	<uni-popup type="bottom" ref="mhpop_tabStatus_one" @change="change" @close="maskClick">
		<view class="mhpop_tab">
			<swiper class="swiper" :duration="200" :current="current" style="height: 100%;" :disable-touch="true"
				@animationfinish="animationfinish">
				<swiper-item>
					<view class="title flex-c-c size-34 font-Bold"
						style="padding: 40rpx 0; color: white;position: relative;left: -260rpx;top: 25rpx;">确认支付</view>
					<u-icon name="close" class="close_circle" size="34" color="#fff" @click="close"></u-icon>
					<view class="box-cont"> 
						<!-- <view class="gif-stu" @click="goPlay">
							<image src="https://pd.pdaxiang.com/upload/static/index/pzselect3.png" v-if="playStu == false"></image>
							<image src="https://pd.pdaxiang.com/upload/static/index/pzselect4.png" v-else ></image>
							<view class="">跳过开盒动画</view>
						</view> -->
						<view class="section_cont">
							<view class="sec_left">
								<image :src="yulanData.cover_pic" mode="aspectFill"></image>
							</view>
							<view class="sec_right">
								<view class="navname" style="color: white;">{{yulanData.box_name}}</view>
								<view class="name" style="color: white;" v-if="yulanData.subtitle">
									{{yulanData.subtitle}}
								</view>
								<view class="price-num flex-j-b flex-a-c">
									<view class="price flex-a-c">
										<!-- <u-image width="41" height="36" :src="iconurl + '/static/index/paidou3.png'">
										</u-image> -->
										<text class="of-t-w" style="color: #21C8C1;font-size: 38rpx;">￥{{yulanData.price}}</text>
									</view>
									<view class="number" style="color: white;">x {{boxnum}}</view>
								</view>
							</view>
						</view>
						<view class="title" style="color: white;">开盒方式</view>
						<view class="tab-box flex-a-c">
							<view class="tab-list flex-column flex-c-c" :class="tabIndex == 1 ? 'activetab' : ''"
								@click="chouhe(1)">
								<view class="name">一发入魂</view>
								<!-- <view class="paidou-num">{{ yulanData.price }}大王币</view>
								<view class="youhui_price flex-c-c" v-if="yulanData.discount_price > 0">优惠{{ yulanData.discount_price }}</view> -->
							</view>
							<view class="tab-list flex-column flex-c-c" :class="tabIndex == 2 ? 'activetab' : ''"
								@click="chouhe(2)">
								<view class="name">欧气三连</view>
								<!-- <view class="paidou-num">{{ yulanData.three_price }}大王币</view>
								<view class="youhui_price flex-c-c" v-if="yulanData.discount_price > 0">优惠{{ yulanData.discount_price }}</view> -->
							</view>
							<view class="tab-list flex-column flex-c-c" :class="tabIndex == 3 ? 'activetab' : ''"
								@click="chouhe(3)">
								<view class="name">豪气五连</view>
								<!-- <view class="paidou-num">{{ yulanData.five_price }}大王币</view>
								<view class="youhui_price flex-c-c" v-if="yulanData.discount_price > 0">优惠{{ yulanData.discount_price }}</view> -->
							</view>
							<view class="tab-list flex-column flex-c-c" :class="tabIndex == 4 ? 'activetab' : ''"
								@click="chouhe(4)">
								<view class="name">霸气十连</view>
								<!-- <view class="paidou-num">{{ yulanData.ten_price }}大王币</view>
								<view class="youhui_price flex-c-c" v-if="yulanData.discount_price > 0">优惠{{ yulanData.discount_price }}</view> -->
							</view>
						</view>
						<view class="order-mation" @click="goseleCoupon">
							<text class="size-30 font-Bold" style="color: white;">优惠券</text>
							<text v-if="youhuinum == 0" style="color: white;">
								选择优惠券
								<u-icon name="arrow-right"></u-icon>
							</text>
							<text v-if="youhuinum != 0" style="color: white;">
								-{{ youhuinum }}
								<u-icon name="arrow-right"></u-icon>
							</text>
						</view>
						<view class="order-mation">
							<text class="color-h size-30" style="color: white;">合计：</text>
							<text class="size-30 qian" style="padding-right: 40rpx;color: #f59b45;">￥{{heji_num}}</text>
						</view>
						<view class="tab_xieyi" @click="goCheck">
							<image :src=" iconurl + '/static/index/pzselect3.png'" v-if="xieyiStu == false"></image>
							<image :src=" iconurl + '/static/index/pzselect4.png'" v-else></image>
							<view class="" style="color: white;">已阅读并同意<text style="color: #077EE6;"
									@click.stop="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text></view>
						</view>
						<view class="foot-btn flex-a-c flex-j-b">
							<!-- <view class="price-a flex-a-c">
								<text class="color-h size-30">合计：</text>
								<text class="size-30 qian" >￥{{heji_num}}</text>
							</view> -->
							<view class="btn color-h size-34 font-Bold flex-c-c" @click="submit">
								<!-- 确认支付 -->
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="popop">
						<view class="header2 flex-a-c" style="color: white;margin-top: 48rpx;">
							<u-icon name="arrow-left" @click="wancheng" size="48"></u-icon>
							<view class=""></view>
						</view>
						<u-icon name="close" class="close_circle" size="34" color="white" @click="close"
							style="margin-top: 20rpx;"></u-icon>
						<!-- <view class="border">
							<image :src="iconurl+'/static/newImg/border.png'" mode="aspectFill"></image>
						</view> -->
						<view class="sectionto" style="color: white;" v-if="couponList!=''">可使用</view>
						<view class="cons" v-if="couponList != ''">
							<scroll-view class="section_Quan" scroll-y="true" lower-threshold="130"
								@scrolltolower="quanscrollLower">
								<view class="section_coupon" v-for="(item, index) in couponList" :key="index">
									<view class="item_box">
										<view class="top">
											<view class="money" v-if="item.price != ''">
												￥{{ item.sub_price }}
											</view>
											<view>
												<view class="use" v-if="item.min_price_desc">
													{{ item.min_price_desc }}
												</view>
											</view>
										</view>
										<view class="time">
											{{ item.begin_time }}-{{ item.end_time }}
										</view>
									</view>

									<image v-if="coupon_id == item.user_coupon_id"
										src="https://pd.pdaxiang.com/upload/static/newImg/yes.png"
										@click="choice(index, item)"></image>
									<image v-else src="https://pd.pdaxiang.com/upload/static/newImg/weixuan.png"
										@click="choice(index, item)"></image>
								</view>
							</scroll-view>
						</view>
						<u-empty text="暂无优惠券" mode="coupon" v-if="couponList == ''"></u-empty>
						<view class="foot" @click="wancheng" v-if="couponList!=''">完成</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</uni-popup>
</template>
<script>
	export default {
		props: {
			yulanData: {
				type: Object,
				default () {
					return {};
				}
			},
			box_id: {
				default () {
					return;
				}
			},
			youhuinum: {
				type: Number,
				default: 0
			},
			couponList: {
				type: Array,
				default () {
					return [];
				}
			},
			heji_num: {
				type: Number,
				default: 0
			},
			coupon_idinit: {
				type: String,
				default () {
					return "";
				}
			},
			youhuinumInit: {
				type: Number,
				default: 0
			},
		},
		mounted() {
			////console.log('盲盒立即支付组件')
		},
		data() {
			return {
				xieyiStu: false,
				playStu: false,
				tabIndex: 1,
				current: 0,
				coupon_id: '',
				price: '',
				boxnum: 1,
				iconurl: this.$configs.urls,
				oldPrice:''//原价
			};
		},
		watch: {
			coupon_idinit: {
				handler(newName, oldName) {
					this.coupon_id = newName
				},
				immediate: true
			}
		},
	
		methods: {
			change(e){
				if(this.$parent.tabIndex){
					this.tabIndex = this.$parent.tabIndex
				}else{
					this.tabIndex = 1
				}
				if(this.tabIndex == 1){
					this.boxnum = 1
				}
				this.xieyiStu = false
				if(!e.show){
					this.$parent.yincangc && this.$parent.yincangc()
				}
			},
			maskClick() {
				this.$parent.yincangc()
			},
			//优惠券数量置为1
			quanpageNull() {
			},
			//优惠券加载更多
			quanscrollLower() {
				this.$emit('quanscrollLower', {
					pay_mode: this.tabIndex
				})
			},
			//选中优惠券
			choice(index, item) {
				////console.log('index',index)
				////console.log('item',item)
				this.coupon_id = item.user_coupon_id;
				this.price = item.sub_price;
				this.youhuinum = item.sub_price;
			},
			animationfinish(e) {
				if (e.detail.current == 1) {
					this.$emit('goseleCoupon', {
						pay_mode: this.tabIndex
					});
				}
			},
			goseleCoupon() {
				this.current = 1;
				this.$emit('goseleCoupon', {
					pay_mode: this.tabIndex
				})
			},
			chouhe(index) {
				this.tabIndex = index;
				if (this.tabIndex == 1) {
					this.boxnum = 1
					this.oldPrice = this.yulanData.price
				} else if (this.tabIndex == 2) {
					this.boxnum = 3
					this.oldPrice = this.yulanData.three_price
				} else if (this.tabIndex == 3) {
					this.boxnum = 5
					this.oldPrice = this.yulanData.five_price
				} else if (this.tabIndex == 4) {
					this.goPlay()
					this.boxnum = 10
					this.oldPrice = this.yulanData.ten_price
				}
				this.$emit('goheji', {
					coupon_id: this.coupon_id,
					youhuinum: this.youhuinum,
					price: this.oldPrice
				});
			},
			submit() {
				if (this.xieyiStu == false) {
					uni.showToast({
						title: "请先勾选阅读并同意用户协议",
						icon: "none"
					})
					return
				}
				
				if(this.tabIndex == 1){
					this.chouhe(1)
				}
				this.$emit('payConfirm_box', {
					tabIndex: this.tabIndex,
					coupon_id: this.coupon_id,
					playStu: this.playStu,
					boxnum: this.boxnum,
					price: this.oldPrice
				})
			},
			goPlay() {
				this.playStu = !this.playStu;
			},
			goCheck() {
				this.xieyiStu = !this.xieyiStu;
			},
			close() {
				uni.setStorageSync('mangheAgain', 0)
				this.$refs.mhpop_tabStatus_one.close();
				this.current = 0;
				this.quanpageNull()
				this.$emit('openDownBtn')
			},
			open() {
				this.$refs.mhpop_tabStatus_one.open();
			},
			wancheng() {
				let price = 0
				if (this.tabIndex == 1) {
					price = this.yulanData.price
				} else if (this.tabIndex == 2) {
					price = this.yulanData.three_price
				} else if (this.tabIndex == 3) {
					price = this.yulanData.five_price
				} else if (this.tabIndex == 4) {
					price = this.yulanData.ten_price

				}
				//初始化
				let _youhuinum = this.youhuinumInit;
				if (this.couponList == '') {
					_youhuinum = 0
				}
			
				this.$emit('goheji', {
					coupon_id: this.coupon_id,
					youhuinum: _youhuinum,
					price: price
				});
				this.current = 0;
			},
			goUrl(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.foot-btn {
		width: 100%;
		height: 154rpx;
		// background: #fff;
		padding: 0 40rpx;
		box-shadow: 0px -3rpx 6rpx 1rpx rgba(0, 0, 0, 0.0784);
		position: absolute;
		bottom: 0;

		.price-a {
			color: #000;

			.qian {
				color: #E80303;
			}
		}
		.btn {
			width: 489rpx;
			height: 130rpx;
			background-image: url('http://mh.qingfentool.vip/upload/image/20221228/11db484e6bf46ff79e158beaa12f5031.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 14rpx;
			margin: 0 auto;
		}
	}

	.popop {
		width: 100vw;
		height: 720rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.sectionto {
			padding: 30rpx 40rpx 10rpx;
			font-size: 30rpx;
			color: #ffffff;
			font-weight: bold;
		}

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-right: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.section {
			font-size: 50rpx;
			color: #333333;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.section1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

			view:nth-of-type(1) {
				font-size: 32rpx;
				color: #666666;
			}

			view:nth-of-type(2) {
				font-size: 32rpx;
				color: #333333;
			}
		}

		.section2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

			.left {
				font-size: 32rpx;
				color: #666666;
			}

			.right {
				text {
					font-size: 32rpx;
					color: #333333;
				}

				view {
					font-size: 32rpx;
					color: #707070;
				}

				image {
					width: 12rpx;
					height: 24rpx;
					padding-left: 10rpx;
				}
			}
		}

		.section3 {
			.title {
				font-size: 34rpx;
				color: #333333;
				padding-left: 20rpx;
			}

			.sec {
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				padding-top: 20rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				text {
					padding-left: 30rpx;
					font-size: 32rpx;
					color: #666666;
				}
			}
		}

		.foot {
			width: 650rpx;
			height: 88rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			background: linear-gradient(0deg, #1B85FC, #4DC5FC);
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-size: 40rpx;
		}
	}

	.cons {
		height: 560rpx;
		overflow-y: scroll;

		.section_Quan {
			max-height: 650rpx;

			.section_coupon {
				display: flex;
				align-items: center;
				width: 670rpx;
				height: 188rpx;
				background: linear-gradient(90deg, #5B8EE4, #3D74D1);
				border: 3rpx solid #2DE4DC;
				border-radius: 10rpx;
				padding: 30rpx;
				margin: 30rpx auto;


				.item_box {
					.top {
						height: 41rpx;
						display: flex;
						align-items: center;


						.money {
							font-size: 54rpx;
							font-weight: bold;
							color: #3AEBE9;
							margin-right: 60rpx;
						}

						.use {
							font-size: 30rpx;
							font-weight: bold;
							color: #FFFFFF;
							margin-bottom: 10rpx;

							&:nth-child(2) {
								font-size: 22rpx;
								font-weight: 400;
							}
						}
					}

					.time {
						width: 507rpx;
						height: 18rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 40rpx;
					}

				}

				image {
					width: 33rpx;
					height: 33rpx;
					justify-content: flex-end;
					margin-left: auto;
					z-index: 9999;
				}
			}
		}
	}

	.mhpop_tab {
		width: 750rpx;
		height: 1000rpx;
		flex-direction: column;
		position: relative;
		z-index: 9999999;
		background-image: url('http://mh.qingfentool.vip/upload/image/20221228/46af0106af3854a55b17f3062388b336.png');
		border-radius: 20rpx 20rpx 0 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.order-mation {
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;

			>text {
				color: #5d5d5d;
				font-weight: 600;
				padding-right: 40rpx;
			}
		}

		.activetab {
			background: #21C8C1 !important;

			.name {
				color: #fff !important;
			}

			.paidou-num {
				color: #fff !important;
			}
		}

		.tab-box {
			padding: 0 40rpx;
			margin-top: 36rpx;

			.tab-list {
				width: 142rpx;
				height: 142rpx;
				background: #f1f1f1;
				border-radius: 17rpx;
				margin-right: 35rpx;
				position: relative;

				.name {
					color: #8d8d8d;
					font-size: 30rpx;
					font-weight: bold;
				}

				.paidou-num {
					color: #8d8d8d;
					font-size: 22rpx;
				}

				.youhui_price {
					min-width: 131rpx;
					height: 29rpx;
					border: 1px solid #e12727;
					color: #e12727;
					border-radius: 8rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					position: absolute;
					right: -10rpx;
					top: -28rpx;
					padding: 0rpx 10rpx;
					box-sizing: border-box;
				}
			}
		}

		.title {
			color: #000;
			font-size: 30rpx;
			font-weight: bold;
			padding: 0 40rpx;
		}

		.section_cont {
			width: 750rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			border-radius: 10rpx;
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;
			position: relative;

			.right_top {
				width: 100rpx;
				height: 50rpx;
				background: #ff5123;
				font-size: 24rpx;
				color: #000;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				border-radius: 20rpx;
			}

			.right_bom {
				display: flex;
				align-items: center;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #a7d402;
				}
			}

			.sec_left {
				flex-shrink: 0;
				image {
					width: 212rpx;
					height: 212rpx;
					border-radius: 8rpx;
					background-color: #fff;
				}
			}

			.sec_right {
				flex: 1;
				// width: 640rpx;
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;

				.navname {
					font-size: 32rpx;
					color: #000;
					font-weight: 700;
				}

				.name {
					font-size: 26rpx;
					color: #3a3a3a;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					margin-top: 15rpx;
				}

				.time {
					font-size: 24rpx;
					color: #ff5123;
					margin-top: 15rpx;
				}

				.price-num {
					margin-top: 35rpx;

					.price {
						text {
							max-width: 150rpx;
							font-size: 34rpx;
							color: #e80303;
						}

						margin-top: 10rpx;
					}

					.number {
						font-size: 34rpx;
						color: #000;
						margin-top: 10rpx;
					}
				}
			}
		}

		.header2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-left: 20rpx;

			image {
				width: 14rpx;
				height: 28rpx;
			}
		}

		.close_circle {
			position: absolute;
			right: 50rpx;
			top: 70rpx;
			z-index: 2;
		}
		
		.border {
			width: 670rpx;
			height: 14rpx;
			margin: 30rpx auto;
		
			image {
				width: 670rpx;
				height: 14rpx;
			}
		}

		.gif-stu {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx 0rpx 40rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				padding-left: 20rpx;
			}
		}

		.tab_xieyi {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 20rpx 0rpx 0rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				padding-left: 20rpx;
			}
		}
	}
</style>
